<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!--include head-->
        <%- include("../general/head.html", undefined) %>
        <!--end of include head-->
    </head>
    <body>
	 	<!--include jumbotron-->
        <%- include("../general/jumbotron.html", undefined) %>
        <!--end of include jumbotron-->
		<!--container-fluid-->
        <div class="container-fluid">
            <!--classifications row-->
            <div class="row">
                <!--include classifications-->
                <%- include("../general/classifications.html", undefined) %>
                <!--end-->
            </div>
            <!--end of classifications row-->
            <!--contents row-->
            <div class="contents-row row">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <%
                        var length = users.length;
                	    var remainder = length % usersPerRow;
                    	var rows = Math.floor(length / usersPerRow);
                        var colsPerUsers = Math.floor(12 / usersPerRow);
                    %>
                    <% for (var i = 0; i < rows; i++) { %>
                    <div class="author-row row">
                        <% for (var j = i * usersPerRow; j < i * usersPerRow + usersPerRow; j++) { %>
                        <div class="author-column col-md-<%= colsPerUsers %> col-sm-<%= colsPerUsers %> col-xs-12">
                            <div class="author-column-thumbnail thumbnail">
                                <img class="author-column-avatar" src="<%= users[j].avatar %>" alt="have no avatar">
                                <div class="caption">
                                    <a href="/users/<%= users[j].id %>"><h3><%= users[j].pen_name %></h3></a>
                                    <p class="author-column-introduce"><%= users[j].introduce%></p>
                                </div>
                            </div>
                        </div>
                        <% } %>
                    </div>
                    <% } %>

                    <% if (remainder > 0) { %>
                        <div class="author-row row">
                        <% for (var i = rows * usersPerRow; i < rows * usersPerRow + remainder; i++) { %>
                        <div class="author-column col-md-<%= colsPerUsers %> col-sm-<%= colsPerUsers %> col-xs-12">
                            <div class="author-column-thumbnail thumbnail">
                                <img class="author-column-avatar" src="<%= users[i].avatar %>" alt="have no avatar">
                                <div class="caption">
                                    <a href="/users/<%= users[i].id %>"><h3><%= users[i].pen_name %></h3></a>
                                    <p class="author-column-introduce"><%= users[i].introduce %></p>
                                </div>
                            </div>
                        </div>
                        <% } %>
                        </div>
                    <% } %>
                </div>
                <div class="col-md-2 col-sm-1"></div>
            </div>
            <!--end of contents row-->
            <!--page row-->
            <div class="page-row row">
                <%- include("../general/page.html", undefined) %>
            </div>
            <!--end of page row-->
        </div>
        <!--end of container-fluid-->
		<!--import javascripts-->
        <%- include("../general/javascripts.html", undefined) %>
		<!--end of import javascripts-->
    </body>
</html>
